//这个版本不错，实现了基本功能，接收一个参数
//连贯曲线，坐标轴拉长，不需要更新坐标轴
import React, { useEffect, useState } from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import axios from 'axios';

const RealTimeChart = ({ code }) => {
    const [chartData, setChartData] = useState([]);
    const [averagePrice, setAveragePrice] = useState(null);

    useEffect(() => {
        const payload = {
            code: code
        };

        const fetchData = async () => {
            try {
                const response = await axios.post('/api/stock/stock_time_data', payload);
                //const response = await axios.get('./realtime_stock.json');
                const { data } = response.data.data;
                console.log(response.data.data)
                const today = new Date();
                today.setHours(0, 0, 0, 0);

                const formattedData = data.map(item => {
                    const [hour, minute] = item.time.split(':');
                    const date = new Date(today);
                    date.setHours(parseInt(hour) + 8, parseInt(minute), 0, 0);
                    return {
                        x: date.getTime(),
                        price: item.price,
                        rate: item.rate,
                        volume: item.volume
                    };
                });

                const avgPrice = formattedData.reduce((acc, cur) => acc + cur.price, 0) / formattedData.length;
                setAveragePrice(avgPrice);

                setChartData(formattedData);
            } catch (error) {
                console.error('Error fetching stock data:', error);
            }
        };

        fetchData();
        const interval = setInterval(fetchData, 60000); // Refresh data every minute
        return () => clearInterval(interval);
    }, [code]);

    const options = {
        chart: {
            zoomType: 'x'
        },
        title: {
            text: '实时股票数据'
        },
        xAxis: {
            type: 'datetime'
        },
        yAxis: [
            { // Price on left Y axis
                title: {
                    text: '价格'
                }
            },
            { // Rate on right Y axis
                title: {
                    text: '涨跌幅 (%)',
                },
                opposite: true
            },
            { // Volume on additional Y axis
                title: {
                    text: '成交量'
                },
                opposite: true
            }
        ],
        tooltip: {
            shared: true
        },
        series: [
            {
                name: '价格',
                data: chartData.map(item => {
                    return {
                        x: item.x,
                        y: item.price,
                        color: item.price >= averagePrice ? 'red' : 'green'
                    };
                }),
                zIndex: 2
            },
            {
                name: '均价',
                data: chartData.map(item => {
                    return [item.x, averagePrice];
                }),
                zIndex: 1,
                dashStyle: 'Dash',
                color: 'purple'
            },
            {
                name: '涨跌幅',
                data: chartData.map(item => {
                    return {
                        x: item.x,
                        y: item.rate,
                        color: item.rate >= 0 ? 'red' : 'green'
                    };
                }),
                yAxis: 1,
                zIndex: 1
            },
            {
                name: '成交量',
                type: 'column',
                data: chartData.map((item, index) => {
                    return {
                        x: item.x,
                        y: item.volume,
                        color: index > 0 && item.volume > chartData[index - 1].volume ? 'red' : 'green'
                    };
                }),
                yAxis: 2,
                zIndex: 0
            }
        ]
    };

    return (
        <div>
            <HighchartsReact
                highcharts={Highcharts}
                options={options}
            />
        </div>
    );
};

export default RealTimeChart;

















//错误版本
// import React, { useEffect, useState } from 'react';
// import Highcharts from 'highcharts';
// import HighchartsReact from 'highcharts-react-official';
// import axios from 'axios';

// const RealTimeChart = () => {
//     const [chartData, setChartData] = useState([]);

//     useEffect(() => {
//         const fetchData = async () => {
//             try {
//                 //const response = await axios.post('./api/stock/fetch_stock');
//                 const response = await axios.get('./realtime_stock.json');
//                 const { data } = response.data.data;
//                 const today = new Date();
//                 today.setHours(0, 0, 0, 0);
                
//                 const formattedData = data.map((item, index) => ({
//                     x: new Date(today.getFullYear(), today.getMonth(), today.getDate(), ...item.time.split(':')).getTime(),
//                     y: item.price,
//                     color: item.price >= (chartData.reduce((acc, cur) => acc + cur.y, 0) / chartData.length) ? 'red' : 'green'
//                 }));
                
//                 setChartData(formattedData);
//             } catch (error) {
//                 console.error('Error fetching stock data:', error);
//             }
//         };

//         fetchData();
//         const interval = setInterval(fetchData, 60000); // Refresh data every minute
//         return () => clearInterval(interval);
//     }, []);

//     const options = {
//         chart: {
//             zoomType: 'x'
//         },
//         title: {
//             text: '股票实时数据'
//         },
//         xAxis: {
//             type: 'datetime'
//         },
//         yAxis: [
//             { // Left Y axis (Price)
//                 title: {
//                     text: '价格'
//                 },
//                 labels: {
//                     format: '{value}'
//                 }
//             },
//             { // Right Y axis (Rate)
//                 title: {
//                     text: '涨跌幅'
//                 },
//                 opposite: true
//             },
//             { // Bottom Y axis (Volume)
//                 title: {
//                     text: '成交量'
//                 },
//                 opposite: true
//             }
//         ],
//         tooltip: {
//             shared: true
//         },
//         series: [
//             {
//                 name: '价格',
//                 data: chartData.map(data => [data.x, data.y]),
//                 yAxis: 0,
//                 zIndex: 2
//             },
//             {
//                 name: '涨跌幅',
//                 data: chartData.map(data => [data.x, data.rate]),
//                 yAxis: 1,
//                 zIndex: 1
//             },
//             {
//                 name: '成交量',
//                 type: 'column',
//                 data: chartData.map(data => [data.x, data.volume]),
//                 yAxis: 2,
//                 zIndex: 0
//             }
//         ]
//     };

//     return (
//         <div>
//             <HighchartsReact
//                 highcharts={Highcharts}
//                 options={options}
//             />
//         </div>
//     );
// };

// export default RealTimeChart;























// //该版本时间正确，但是其他部分和数据利用不完整
// import React, { useEffect, useState } from 'react';
// import Highcharts from 'highcharts';
// import HighchartsReact from 'highcharts-react-official';
// import axios from 'axios';

// const RealTimeChart = () => {
//     const [chartData, setChartData] = useState({
//         series: [{
//             name: '价格',
//             data: []
//         }]
//     });

    // useEffect(() => {
    //     const fetchData = async () => {
    //         try {
    //             //const response = await axios.post('./api/stock/fetch_stock');
    //             const response = await axios.get('./realtime_stock.json');
    //             const { data } = response.data.data; // 确保我们访问的是内层的data数组
    //             const today = new Date(); // 获取今天的日期
    //             today.setHours(0, 0, 0, 0); // 设置时间为午夜，清除小时、分钟、秒和毫秒

    //             const formattedData = data.map(item => {
    //                 const [hour, minute] = item.time.split(':');
    //                 // 为时间添加8小时，以将UTC时间转换为北京时间
    //                 const date = new Date(today);
    //                 date.setHours(parseInt(hour) + 8, parseInt(minute), 0, 0); 
    //                 return {
    //                     x: date.getTime(),
    //                     y: item.price
    //                 };
    //             });
    //             setChartData({
    //                 ...chartData,
    //                 series: [{ ...chartData.series[0], data: formattedData }]
    //             });
    //         } catch (error) {
    //             console.error('Error fetching stock data:', error);
    //         }
    //     };

    //     fetchData();
    // }, []);

//     const options = {
//         title: {
//             text: '实时股价图'
//         },
//         xAxis: {
//             type: 'datetime',
//             dateTimeLabelFormats: {
//                 hour: '%H:%M'
//             },
//             title: {
//                 text: '时间'
//             }
//         },
//         yAxis: {
//             title: {
//                 text: '价格 (元)'
//             }
//         },
//         series: chartData.series,
//         tooltip: {
//             headerFormat: '{point.x:%A, %b %e, %H:%M}<br>',
//             pointFormat: '价格: {point.y:.2f}'
//         }
//     };

//     return (
//         <div>
//             <HighchartsReact
//                 highcharts={Highcharts}
//                 options={options}
//             />
//         </div>
//     );
// };

// export default RealTimeChart;























//第一版，时间戳有问题
// import React, { useEffect, useState } from 'react';
// import Highcharts from 'highcharts';
// import HighchartsReact from 'highcharts-react-official';
// import axios from 'axios';

// const RealTimeChart = () => {
//     const [chartData, setChartData] = useState({
//         series: [{
//             name: '价格',
//             data: []
//         }]
//     });

//     useEffect(() => {
//         const fetchData = async () => {
//             try {
//                 //const response = await axios.post('./api/stock/fetch_stock');
//                 const response = await axios.get('./realtime_stock.json');
//                 const { data } = response.data.data;
//                 console.log("收到的数据为:", response.data.data)
//                 const formattedData = data.map(item => ({
//                     x: Date.parse(`2023-06-07T${item.time}:00`), // 转换时间为JavaScript的时间戳
//                     y: item.price
//                 }));
//                 setChartData({
//                     ...chartData,
//                     series: [{ ...chartData.series[0], data: formattedData }]
//                 });
//             } catch (error) {
//                 console.error('Error fetching stock data:', error);
//             }
//         };

//         fetchData();
//     }, []);

//     const options = {
//         title: {
//             text: '实时股价图'
//         },
//         xAxis: {
//             type: 'datetime',
//             dateTimeLabelFormats: {
//                 minute: '%H:%M'
//             }
//         },
//         yAxis: {
//             title: {
//                 text: '价格'
//             }
//         },
//         series: chartData.series
//     };

//     return (
//         <div>
//             <HighchartsReact
//                 highcharts={Highcharts}
//                 options={options}
//             />
//         </div>
//     );
// };

// export default RealTimeChart;
